<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/3/11
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ include file="commonLib.jsp" %>
<html>
<head>
    <title>课程目标分析</title>
</head>
<script src="../js/echarts.js"></script>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/bootstrap.min.css'/>" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>

    body::-webkit-scrollbar {
        display: none;
    }


    #main {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    #main .title {
        position: absolute;
        top: 50px;
        width: 100vw;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 0 auto;
        padding: 0;
        font-size: 25px;
        font-weight: 900;
    }

    .content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid black;
        border-radius: 10px;
        padding: 20px;
    }
  #main2{
    position: relative;
  }
    #main1{
      position: relative;
    }
    .back{
        position: fixed;
        top: 40px;
        right: 100px;
    }

</style>
<body>
<div id="main">
    <button type="button" class="btn btn-default back" aria-label="Left Align" onclick="javascript:history.back(-1);">
        <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
    </button>
    <div class="title">${stuName}的课程目标分析</div>
    <div class="content">
        <div id="main1" style="width: 600px;height:400px;"></div>
        <div id="main2" style="width: 600px;height:400px;"></div>
    </div>
</div>
<script type="text/javascript">
    if(isNaN(${pieChart}[0].value)){
        alert("暂时无数据分析~请等待老师安排噢");
        history.back(-1);
    }

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    // 指定图表的配置项和数据
    <%--var option1 = {--%>
    <%--  color:'skyblue',--%>
    <%--  toolbox: {--%>
    <%--    feature: {--%>
    <%--        dataView: {show: true, readOnly: true},--%>
    <%--        magicType: {show: true, type: ['line', 'bar']},--%>
    <%--        restore: {show: true},--%>
    <%--        saveAsImage: {show: true}--%>
    <%--      },--%>
    <%--  },--%>
    <%--    title: {--%>
    <%--        text: '课程目标掌握程度',--%>
    <%--    },--%>
    <%--    tooltip: {},--%>
    <%--    legend: {--%>
    <%--        data: ['课程目标掌握程度']--%>
    <%--    },--%>
    <%--    xAxis: {--%>
    <%--        data: ${targetNames}--%>
    <%--    },--%>
    <%--    yAxis: {},--%>
    <%--    series: [{--%>
    <%--        name: '课程目标掌握程度',--%>
    <%--        type: 'bar',--%>
    <%--        data: ${targetControl}--%>
    <%--    }]--%>
    <%--};--%>

    console.log(${targetNames})
    let targetControl = ${targetControl};
    let targetNames = ${targetNames};
    let arr = [];
    arr.push(['score',  'target']);
    for(let i=0;i<targetControl.length;i++){
        let newArr = [];
        newArr.push(targetControl[i]*100);
        newArr.push(targetNames[i]);
        arr.push(newArr);
    }

    console.log(arr)
    var option1 = {
        dataset: {
            source: arr
        },
        toolbox: {
            feature: {
                // dataView: {show: true, readOnly: true},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            },
        },
        title: {
            text: '课程目标掌握程度',
            left: 'center'
        },
        grid: {containLabel: true},
        xAxis: {name: 'score'},
        yAxis: {type: 'category'},
        visualMap: {
            orient: 'horizontal',
            left: 'center',
            min: 0,
            max: 100,
            text: ['High Score', 'Low Score'],
            // Map the score column to color
            dimension: 0,
            inRange: {
                color: ['#FD665F',  '#30b500']
            }
        },
        series: [
            {
                type: 'bar',
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'score',
                    // Map the "product" column to Y axis
                    y: 'target'
                },
                name: '课程目标掌握程度'
            }
        ]
    };

    var option2 = {
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: true},
          saveAsImage: {show: true}
        }
      },
      title: {
        text: '课程目标占比',
        left: 'center'
      },
        series: [
            {
                name: '课程目标占比',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data: ${pieChart} // 数据数组，name 为数据项名称，value 为数据项值

            }
        ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    myChart2.setOption(option2);
</script>
</body>
</html>
